<template>
	<view class="emotion_box bg-[length:100%_100%]  px-30 pt-40 pb-40">
		<ImageBoxVue class="mb-20 ml-30" src="/static/test/emotion_title.png" width="236rpx" height="88rpx" />
		<view class="flex flex-wrap justify-between">
			<view class="py-20 px-20 mb-20 emotion_list bg-[length:100%_100%] bg-no-repeat" v-for="(e,i) in emotion" :key="i"
				@click="onPath('/pages/test/lesson',e)">
				<text class="text-xs">{{e.name}}</text>
			</view>
		</view>
		<view id="ai" class="flex items-center">
			<ImageBoxVue src="/static/test/customer_service1.png" width="72rpx" height="70rpx"></ImageBoxVue>
			<view class="bg-[#EDF5FA] rounded-full flex-1 flex items-center mx-10 h-68">
				<picker :range="aiList" :value="aiProblem" range-key="name" class="h-full w-full flex-1 flex items-center"
					@change="setAiProblem">
					<view class="px-20 flex justify-between items-center h-full w-full">
						<text :class="[aiProblem?'text-black':'text-[#A0B5C1]']">{{aiProblem?aiList[aiProblem].name:'请选择问题'}}</text>
						<uni-icons type="down" size="18"></uni-icons>
					</view>
				</picker>
			</view>
			<view
				class="bg-gradient-to-b from-[#7CA1FF] to-[#0094FF] h-68 rounded-full w-236 text-center pt-15 bg-[length:100%_100%]"
				@click="getAiProblem">
				<text class="text-sm text-white">AI免费急速解读</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import testApi from '@/apis/apiList/testApi';
	import liveApi from '@/apis/apiList/liveApi';
	import microphoneVue from '../../../live/components/microphone.vue';
	const emotion = ref([])
	const step = ref(0)
	const liveData = ref([])
	const popupRef = ref(null)
	const popupliveRef = ref(null)
	// AI问题列表
	const aiList = ref([])
	const problem = ref("")
	const aiProblemRef = ref()
	const aiProblem = ref("")

	const obtainExaPaperlist = () => {
		testApi.obtainExaPaperlist().then(res => {
			emotion.value = res.data
		})
	}
	const getQuickansquelist = () => {
		testApi.getQuickansquelist().then(res => {
			aiList.value = res.data
		})
	}
	onShow(() => {
		obtainExaPaperlist()
		getQuickansquelist()
	})

	const setAiProblem = (val) => {
		aiProblem.value = String(val.detail.value)
	}
	const getAiProblem = () => {
		if (!aiProblem.value) {
			uni.showToast({
				icon: 'none',
				title: '未选择问题'
			})
			return
		}
		const params = {
			"member.id": uni.getStorageSync('user').id,
			"quickansque.id": aiList.value[aiProblem.value].id,
			"name": aiList.value[aiProblem.value].name
		}

		uni.navigateTo({
			url: '/pages/test/AICamera?params=' + JSON.stringify(params)
		})
	}

	const handleStep = (val) => {
		step.value = val
	}
	const handleBack = () => {
		step.value = step.value - 1
	}
	const handleClose = () => {
		step.value = 0
		describe.value = ''
		popupRef.value.close()
	}

	const handleAnchor = () => {
		popupliveRef.value.open()
		getAnchorList()
	}
	const getAnchorList = () => {
		// triggered.value = true
		liveApi.getAnchorlistAtexamine({
			examine: "0",
			page: 1,
			limit: 10
		}).then(res => {
			liveData.value = res.data
			// triggered.value = false;
			// _freshing.value = false;A
		})
	}
	const onPath = (router, e) => {
		uni.navigateTo({
			url: `${router}?type=exam&id=${e.id}`,
			// url: `${router}?id=${e.id}&title=${e.name}`,
		})
	}
</script>

<style lang="less" scoped>
	.emotion_box {
		background-image: url("/static/test/emotion_bg.png");

		.emotion_list {
			width: calc(50% - 10rpx);
			background-image: url("/static/test/emotion_list.png")
		}

		.button_box {
			background-image: url("/static/test/button.png");
		}
	}

	.step-up {
		top: 0;
		left: 0;
	}
</style>